<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴菜单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="accordion-container">
        <h2 class="accordion-title">手风琴菜单示例</h2>
        
        <div class="accordion">
            <!-- 手风琴项 1 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span>基础功能</span>
                    <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-content">
                    <p>这是基础功能的详细介绍内容。手风琴菜单是一种常见的UI组件，用于在有限空间内展示多层级内容。</p>
                    <ul>
                        <li>点击展开/收起内容</li>
                        <li>平滑的动画过渡效果</li>
                        <li>自动收起其他展开项</li>
                    </ul>
                </div>
            </div>
            
            <!-- 手风琴项 2 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span>CSS过渡效果</span>
                    <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-content">
                    <p>CSS过渡(transition)属性允许我们在改变CSS值时添加平滑的过渡效果。</p>
                    <ul>
                        <li>transition-property: 定义哪些属性需要过渡</li>
                        <li>transition-duration: 定义过渡效果持续时间</li>
                        <li>transition-timing-function: 定义过渡效果的时间曲线</li>
                        <li>transition-delay: 定义过渡效果的延迟时间</li>
                    </ul>
                </div>
            </div>
            
            <!-- 手风琴项 3 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span>高度动画实现</span>
                    <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-content">
                    <p>高度动画是手风琴菜单的核心，通过控制内容区域的高度来实现展开和收起效果。</p>
                    <ul>
                        <li>使用max-height代替height实现流畅动画</li>
                        <li>配合overflow: hidden来隐藏超出部分</li>
                        <li>设置足够大的max-height值以容纳内容</li>
                    </ul>
                </div>
            </div>
            
            <!-- 手风琴项 4 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span>图标旋转效果</span>
                    <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-content">
                    <p>图标旋转可以为用户提供清晰的视觉反馈，指示当前项目的展开/收起状态。</p>
                    <ul>
                        <li>使用transform: rotate()实现旋转</li>
                        <li>配合transition实现平滑过渡</li>
                        <li>通常从0°旋转到45°表示展开</li>
                    </ul>
                </div>
            </div>
            
            <!-- 手风琴项 5 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span>响应式设计</span>
                    <span class="accordion-icon">+</span>
                </button>
                <div class="accordion-content">
                    <p>手风琴菜单在不同设备上都应该有良好的表现。</p>
                    <ul>
                        <li>使用媒体查询适配不同屏幕尺寸</li>
                        <li>在移动设备上优化触摸体验</li>
                        <li>调整字体大小和间距以提高可读性</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>